<template>
  <el-dialog :model-value="props.addEditUserDialog" :title="props.activeName === 'many' ? '添加动态参数' : '添加静态属性'" :before-close="closeDialog">
    <el-form ref="ruleFormRef" :model="form" label-width="auto" :rules="formRules.rules">
       <el-form-item :label="props.activeName === 'many' ? '动态参数' : '静态属性'" prop="attr_name">
         <el-input v-model="form.attr_name"/>
       </el-form-item>
    </el-form>

    <template #footer>
    <div class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="onSubmit(ruleFormRef)">确定</el-button>
    </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from 'vue'
import { AddParamsFnc, ShowEditParamsFnc, EditParamsFnc } from '@/api/params'
import type { FormInstance } from 'element-plus'
const props = defineProps({
  addEditUserDialog: {type: Boolean, required: true},  
  activeName: {type: String, required: true},
  typeFlag: {type: String, required: true},
  cateID: {type: String, required: true},
  attrID: {type: String, required: true}
})

const emit = defineEmits(['showDialog', 'init'])
const ruleFormRef = ref<FormInstance>()
const objForm = ref({}) // 复制对象  用做修改对象时做比较 是否有做修改  

// 打开编辑盒子的情况下采取获取值
watch([() => props.typeFlag, () => props.cateID, () => props.attrID], async ([newType, newCateID, newAttrID]) => {
  if(newType === 'edit'){
    const res = await ShowEditParamsFnc(parseInt(newCateID), parseInt(newAttrID), {attr_sel: newType})
    if(res.data.meta.status === 200 ) {
      form.attr_name = res.data.data.attr_name
      objForm.value = {...form}
    }
  }
})

// 关闭dialog
const closeDialog = () => {
  emit('showDialog', false, props.typeFlag)
  form.attr_name = ''
}

// 表单数据
const form = reactive({attr_name: ''})

// 表单验证规则
const formRules = reactive({
  rules: {
    attr_name: [
      {required: true, message: '请输入用户名', trigger: 'blur'},
      {min: 3, max: 5, message: '长度在3-5个字符', trigger: 'blur'}
    ]
  }
})

// 公共消息
const publicMsg = (msg: string, type: string) => {
  ElMessage({type: 'success', message: msg, duration: 1000, onClose: () => {
    emit('showDialog', false, type)
    emit('init') 
  }})
}

 // 提交表单
 const onSubmit = async (formEl: FormInstance | undefined) => {
  if(!formEl) return  
  await formEl.validate(async (valid) => {
    if(valid) {
      if(props.typeFlag === 'add') {
        const res = await AddParamsFnc(parseInt(props.cateID), {attr_name: form.attr_name, attr_sel: props.activeName})
        if(res.data.meta.status === 201) {
          publicMsg('添加成功', 'add')
        }
      } else {
        if(JSON.stringify(objForm.value) === JSON.stringify(form)) { // 未做修改
          emit('showDialog', false, 'edit')
          return
        } else { // 修改了
          const res = await EditParamsFnc(parseInt(props.cateID), parseInt(props.attrID), {attr_name: form.attr_name, attr_sel: props.activeName})
          if(res.data.meta.status === 200) {
            publicMsg('修改成功', 'edit')
          }
        }
      }
    }
  })
}
</script>